<template>
  <div>
    <el-row class="top_row">
            <el-col :span="24">
              <div class="top_title">
              <div class="left_add">
                  <el-button type="danger"  size="mini" icon="el-icon-circle-plus" @click="$router.push('/Car/Set')">添加</el-button>
              </div>
              <div class="right_sel">
                  <el-input size="mini" v-model="SelName" placeholder="查找...">
                  <el-button slot="append" @click="SelDt" icon="el-icon-search" style="width:50px;"></el-button>
                  </el-input>
               </div>
            </div>
         </el-col>
      </el-row>
    <el-table :data="CarSetLIst" style="width: 100%">
      <el-table-column fixed prop="pk_Set" label="ID" width="100"></el-table-column>
      <el-table-column prop="TypeName_CHS" label="类型" width="80">
        <template slot-scope="ListDt">{{ListDt.row.TypeName_CHS}}</template>
        </el-table-column>        
      <el-table-column prop="Title" label="标题" width="220"></el-table-column>
      <el-table-column label="购车日期" >
        <template slot-scope="scope">
          <span>{{scope.row.BuyDate|TimeFilter}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="LastMaintenance" label="上次保养" ></el-table-column>
      <el-table-column prop="Mileage" label="里程数" width="120"></el-table-column>
      <el-table-column prop="StatusName_CHS" label="状态" width="110">
        <template slot-scope="ListDt">
          <el-tag effect="dark" size="small" :style="'border-color:'+ListDt.row.Visual" :color="ListDt.row.Visual">
            {{ListDt.row.StatusName_CHS}}</el-tag>
        </template>
        </el-table-column>        
      <el-table-column prop="operation" label="操作" width="220" align="center" fixed="right">
        <template slot-scope="scope">          
                <el-button type="primary" icon="el-icon-search" size="mini" @click="Update(scope.row.pk_Set)">修改</el-button>        
            
                <el-popconfirm
                @onConfirm="Delete(scope.$index,scope.row.pk_Set)"
                style="margin-left:10px;"
                :title="'确定删除?'">
                <el-button slot="reference" type="danger" size="mini" icon="el-icon-delete">删除</el-button>
              </el-popconfirm>
                <!-- <el-button type="danger" icon="el-icon-search" size="mini" @click="Delete(scope.row.pk_Set)">删除</el-button> -->
        </template>
        
      </el-table-column>
    </el-table>
    <div>
      <el-row>
        <el-col :span="12">
          <div class="grid-content bg-purple"></div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple-light">
            <!-- <div class="block">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage4"
                :page-sizes="[100, 200, 300, 400]"
                :page-size="100"
                layout="total, sizes, prev, pager, next, jumper"
                :total="400"
              ></el-pagination>
            </div> -->
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.top_row {
  border-bottom: 1px solid #f7f7f7;
  padding-bottom: 10px;
  .top_title {
    .left_add {
      float: left;
    }
    .right_sel {
      float: right;
    }
  }
}
</style>
<script>
export default {
  data() {
    return {
      CarSetLIst:[],
      SelName:""
    }
  },
  mounted(){
       this.SelDt()
  },
  methods:{
    SelDt(){
      this.$axios({
            url:'/HrApi/CarSet/GetCarSetList',
            method:'GET',
            params:{
              SelName:this.SelName
            }
        }).then(res=>{
            if(!res.data.code){
              console.log(res.data)
                this.CarSetLIst=res.data.data
            }else{
                this.$message.error(res.data.msg);
            }
        })
    },
    Update(id){
       this.$router.push({
        path: "/Car/Set",
        query: {
          id:id
        }
      });
    },
    Delete(index,pk_Set){
      this.$axios({
        url: '/HrApi/CarSet/DeleteCarSet',
        method: 'POST',
        data:this.$Qs.stringify( {
          pk_Set
        })
      }).then(res => {
        if (!res.data.code) {
          console.log(res.data)
          this.$message.success(res.data.msg)
          this.SelDt();
        } else {
          this.$message.error(res.data.msg)
        }
      })
    }
  },
  //过滤时间
  filters: {
    TimeFilter (t) {
      if (t === null) {
        return '无'
      }
      let dt = t.split('T').join(' ')
      if (dt.split('.').length > 1) {
        dt = dt.split('.')[0]
      }
      return dt
    }
  },
};
</script>